<template>
  <div class="detailTask">
    <header-nav :leftArrow="true" :titelText="'案件详情'"></header-nav>
    <div class="detail">
      <div class="infoBox">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>案件信息</div>
          </div>
        </div>
        <div class="info">
          <div class="infoItem">
            <div class="left">案件来源</div>
            <div class="right">
              {{ detailForm.sourceName }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">案由</div>
            <div class="right">
              {{ changeCaseActionName(detailForm.caseActionName) }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">简要案情</div>
            <div class="right">
              {{ detailForm.caseBrief }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.sourceName !== '其他'">
            <div class="left">关联任务</div>
            <div class="right right1" @click="gotoTaskDetail">
              查看任务
            </div>
          </div>
        </div>
      </div>

      <div class="infoBox">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>当事人信息</div>
          </div>
          <div class="title-right">
            {{
      detailForm.placeInfo?.partyType == 0
        ? '自然人'
        : detailForm.placeInfo?.partyType == 1
          ? '法人'
          : detailForm.placeInfo?.partyType == 2
            ? '个体工商户'
            : detailForm.placeInfo?.partyType == 3
              ? '非法人组织'
              : ''
    }}
          </div>
        </div>
        <div class="info">
          <div class="infoItem">
            <div class="left">
              {{
        detailForm.placeInfo?.partyType == 0
          ? '姓名'
          : detailForm.placeInfo?.partyType == 2
            ? '字号名称'
            : '单位名称'
      }}
            </div>
            <div class="right">
              {{ detailForm.placeInfo?.placeName }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
            <div class="left">性别</div>
            <div class="right">
              {{
      detailForm.placeInfo?.sex == 1
        ? '男'
        : detailForm.placeInfo?.sex == 2
          ? '女'
          : ''
    }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
            <div class="left">出生日期</div>
            <div class="right">
              {{ detailForm.placeInfo?.birthDate }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 0 ||
        detailForm.placeInfo?.partyType == 2
        ? '联系电话'
        : '单位联系电话'
    }}
            </div>
            <div class="right">{{ detailForm.placeInfo?.contactsTel }}</div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
            <div class="left">证件类型</div>
            <div class="right">{{ detailForm.placeInfo?.idTypeName }}</div>
          </div>
          <div class="infoItem">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 0
        ? '证件号码'
        : '社会统一信用代码'
    }}
            </div>
            <div class="right">{{ detailForm.placeInfo?.idCode }}</div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType != 0">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 1
        ? '法人'
        : detailForm.placeInfo?.partyType == 3
          ? '负责人'
          : '经营者姓名'
    }}
            </div>
            <div class="right">{{ detailForm.placeInfo?.headName }}</div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 1 ||
      detailForm.placeInfo?.partyType == 3
      ">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 1 ? '法人电话' : '负责人电话'
    }}
            </div>
            <div class="right">{{ detailForm.placeInfo?.headTel }}</div>
          </div>
          <div class="infoItem">
            <div class="left">
              {{ detailForm.placeInfo?.partyType == 0 ? '住址' : '注册地址' }}
            </div>
            <div class="right">
              {{
      detailForm.placeInfo?.registerCity +
      detailForm.placeInfo?.registerCounty +
      detailForm.placeInfo?.registerTown +
      detailForm.placeInfo?.registerAddress
    }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType != 0">
            <div class="left">经营地址</div>
            <div class="right">
              {{
      detailForm.placeInfo?.operateCity +
      detailForm.placeInfo?.operateCounty +
      detailForm.placeInfo?.operateTown +
      detailForm.placeInfo?.operateAddress
    }}
            </div>
          </div>

        </div>
      </div>

      <div class="infoBox" v-if="detailForm.resultFileUrl">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>检查结果表</div>
          </div>
        </div>
        <div class="info">
          <div class="infoItem">
            <div class="ws-left">
              <img src="../../assets/images/wsYes.png" alt="" />
              <div>检查结果表.doc</div>
            </div>
            <div class="ws-right" @click="viewFile(detailForm.resultFileUrl)">
              查看
            </div>
          </div>
        </div>
      </div>

      <div class="infoBox">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>立案信息</div>
          </div>
        </div>
        <div class="info">
          <div class="infoItem">
            <div class="left">立案意见</div>
            <div class="right">
              {{ detailForm.opinion }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">执法机构</div>
            <div class="right">
              {{ detailForm.agencyName }}
            </div>
          </div>
        </div>
      </div>

      <div class="infoBox" v-if="detailForm.registerList != ''">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>审批信息</div>
          </div>
        </div>
        <div class="info" v-for="(item, index) in detailForm.registerList" :key="index">
          <div class="infoItem">
            <div class="left">审批负责人</div>
            <div class="right">
              {{ item.approveName }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">审批时间</div>
            <div class="right">
              {{ item.approveTime }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">审批结果</div>
            <div class="right">
              {{
              item.nodeStatus == 2
              ? '已同意'
              : item.nodeStatus == 3
              ? '不同意'
              : ''
              }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">审批意见</div>
            <div class="right">
              {{ item.approveOpinions }}
            </div>
          </div>
        </div>
      </div>
      <div class="margin-bottom-40"></div>
      <div class="infoBox btn-aa" v-if="from == 2">
        <van-button block type="primary" @click="goResult()"> 审批 </van-button>
      </div>
    </div>
  </div>
</template>
<script setup name="detail">
const { useRegister } = $globalStore
const router = useRouter()
const route = useRoute()
const id = ref(route.query.id)
const progressId = ref(route.query.progressId)
const from = ref(route.query.from)
const detailForm = ref({})
const chooseFlag = ref(route.query.chooseFlag)

const goResult = () => {
  router.push({
    name: 'filingResult',
    query: {
      id: progressId.value,
      caseId: detailForm.value.id,
      sponsor: detailForm.value.sponsor,
      sponsorId: detailForm.value.sponsorId,
      chooseFlag: chooseFlag.value
    },
  })
}

const changeCaseActionName = (str) => {
  if (str) {
    return str.split(',').map((item, index) => `${index + 1}. ${item}`).join("；")
  } else {
    return ''
  }
}

//查看文件
const viewFile = async (url) => {
  router.push({
    name: 'fileDetail',
    query: {
      url: url,
    },
  })
}

const gotoTaskDetail = () => {
  router.push({ name: 'detailSuperviseTasktwo', query: { id: detailForm.value.taskId } })
}

onMounted(async () => {
  if (id.value != '') {
    const res = await useRegister.caseDetail(id.value)
    if (res.code == 0) {
      detailForm.value = res.data
      console.log(detailForm.value)
    }
  }
})
</script>
<style lang="scss" scoped>
.detailTask {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: #f7f7f7;

  .detail {
    width: 100%;
    height: calc(100% - 46px);
    overflow-y: auto;
    margin-top: 46px;

    .infoBox {
      background-color: #ffffff;
      margin: 10px 8px;
      border-radius: 8px;

      .title {
        padding: 16px 12px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;

        .title-left {
          display: flex;
          align-items: center;

          .titleIcon {
            width: 4px;
            height: 14px;
            background: linear-gradient(180deg, #5688f5 0%, #1764ce 100%);
            border-radius: 20px;
            margin-right: 8px;
          }
        }

        .title-right {
          padding: 5px 12px;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #1764ce;
          background-color: rgba(23, 100, 206, 0.1);
          border-radius: 4px;
        }
      }

      .info {
        padding: 16px 12px;

        .infoItem {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .ws-left {
            display: flex;
            align-items: center;
            color: #2b2b2b;
            font-size: 15px;
            font-weight: 500;

            img {
              width: 36px;
              height: 36px;
            }
          }

          .ws-right {
            min-width: 50px;
            color: #1764ce;
            font-size: 14px;
            font-weight: 400;
          }

          .left {
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 22px;
            color: #8c8c8c;
            min-width: 80px;
            margin-right: 20px;
          }

          .right {
            width: 1px;
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 22px;
            color: #2b2b2b;
            text-align: right;
            flex: 1;
            word-wrap: break-word;
            /* 设置自动换行 */
          }
        }

        .infoItem:last-child {
          margin-bottom: 0;
        }

        .danger {
          margin-bottom: 12px;
        }

        .danger:last-child {
          margin-bottom: 0;
        }
      }

      .result {
        padding: 16px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;

        .result-title {
          // width: 140px;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 24px;
          color: #4d4d4d;
        }
      }
    }
  }
}

.btn-aa {
  width: 100%;
  position: fixed;
  bottom: 0px;
  margin: 0 !important;
  padding: 8px;
  box-sizing: border-box;
}

.setpBox {
  background-color: #ffffff;
  border-radius: 4px;

  .setpBox-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 12px;
    border-bottom: 1px solid #f5f5f5;

    .title1 {
      font-size: 17px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 24px;
      color: #4d4d4d;
    }

    .tag1 {
      padding: 5px 8px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 20px;
    }
  }

  .setpBox-con {
    padding: 16px;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .topName {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24px;
        color: #2b2b2b;
      }

      .topTime {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20px;
        color: #8c8c8c;
      }
    }

    .bot {
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 21px;
      color: #8c8c8c;
      word-break: break-all;
    }
  }
}

.green {
  background-color: rgba(2, 173, 130, 0.1);
  color: #02ad82;
}

.orige {
  background-color: rgba(252, 119, 10, 0.1);
  color: #fc770a;
}

.red {
  background-color: rgba(255, 77, 77, 0.1);
  color: #ff4d4d;
}

.margin-bottom-40 {
  margin-bottom: 80px;
}
</style>
